<!-- 学习课程（视频课程，图书课程） -->
<script setup>
defineOptions({
  name: 'LearningCourse',
})
defineProps({
  kind: { type: String }, //课程种类（视频/图书）
  courseName: { type: String }, //课程名字
  history: { type: String }, //历史课程
  buttonChoose: { type: String }, //选择按钮
  buttonChange: { type: String }, //更改按钮
})
</script>
<template>
  <div class="learning">
    <p>
      {{ kind }} :<span>{{ courseName }}</span>
    </p>
    <div class="learn">
      <!-- 历史 -->
      <div class="history">
        <p>
          上次看到 :<span>{{ history }}</span>
        </p>
      </div>
      <!-- 选集 -->
      <button>{{ buttonChoose }}</button>
      <!-- 更换课程 -->
      <button>{{ buttonChange }}</button>
    </div>
  </div>
</template>
<style lang="less" scoped>
.learning {
  width: 80%;
  margin: auto;
  margin-top: 25px;
  font-size: 18px;
  p {
    margin-left: 8px;
    color: rgb(177, 171, 171);
    span {
      margin-left: 5px;
      color: #63e2b7;
    }
  }
  .learn {
    display: flex;
    align-items: center;
    margin: 5px auto;
    border-radius: 12px;
    background-color: #18181c;
    .history {
      width: 80%;
      height: 60px;
      margin: 8px 5px;
      border: 0.1px solid #63e2b7;
      border-radius: 10px;
      p {
        color: #d5d5d6;
        white-space: nowrap;
        line-height: 60px;
        span {
          color: #d5d5d6;
        }
      }
    }
    button {
      white-space: nowrap;
      height: 60px;
      background-color: #18181c;
      font-size: 18px;
      border: 0.1px solid;
      border-radius: 8px;
      padding: 0 10px;
      margin-left: 10px;
      margin-right: 5px;
      color: #63e2b7;
    }
  }
}
</style>
